<!--
 * @Date: 2022-04-16 15:29:57
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-04-24 15:31:20
 * @FilePath: \weibovue\src\components\showComment.vue
 * @Description: something
-->
<template>
  <div class="showCommentArea">
    <div class="left">
      <img :src="props.commentData?.user?.avatar" />
    </div>
    <div class="center">
      <div class="nickName">
        {{ props.commentData?.user?.nickName }}
        <span class="tag" v-if="props.commentData?.user?.id == authorId">
          作者
        </span>
      </div>
      <div class="createTime">
        {{
          typeof createTime(props.commentData?.createdAt) == "number"
            ? createTime(props.commentData?.createdAt) + "小时前"
            : createTime(props.commentData?.createdAt)
        }}
      </div>
    </div>
    <div class="right">
      <!-- {{ props.commentData?.user?.id }}--{{ authorId }} -->
      <div
        class="reply"
        v-if="props.commentData?.user?.id !== userInfo.id"
        @click="
          showReplyDialog(
            props.commentData?.id,
            -1,
            'comment',
            props.commentData?.blogId,
            props.commentData?.user,
          )
        "
      >
        <i class="iconfont icon-pinglun"></i>
      </div>
      <div v-else class="reply" @click="deleteCommentFlag = true">
        <i class="iconfont icon-shanchu1"></i>
      </div>
    </div>
  </div>
  <div class="ReplyContent markdown-body" v-html="contentHTML"></div>
  <div v-if="!showReply">
    <div
      v-if="commentReply!.replies?.length !== 0"
      class="showMoreReply"
      @click="showReply = !showReply"
    >
      展开({{ commentReply!.replies?.length }})条回复
    </div>
  </div>

  <div v-show="showReply" style="max-height: 400px; overflow-y: auto">
    <div v-for="(item, index) in commentReply!.replies" :key="index">
      <div class="showReplyArea">
        <div class="left">
          <img :src="item.user?.avatar" />
        </div>
        <div class="center">
          <div class="nickName">
            {{ item.user?.nickName }}
            <span class="tag" v-if="authorId == item.user?.id"> 作者 </span>
            <span class="tag" v-else-if="userInfo.id == item.user?.id">
              我</span
            >
          </div>
          <div class="createTime">
            {{
              typeof createTime(item?.createdAt!) == "number"
                ? createTime(item?.createdAt!) + "小时前"
                : createTime(item?.createdAt!)
            }}
          </div>
        </div>
        <div class="right">
          <div
            class="reply"
            v-if="userInfo.id !== item.user?.id"
            @click="showReplyDialog(props.commentData?.id,item.id!,'reply',item.blogId,item.user)"
          >
            <i class="iconfont icon-pinglun"></i>
          </div>
        </div>
      </div>
      <div class="replyContent markdown-body" v-html="item.content"></div>
    </div>
    <div class="putAway" @click="showReply = false">收起</div>
  </div>
  <reply
    :dialogTableVisible="dialogTableVisible"
    @close="close"
    :ReplyUserInfo="ReplyUserInfo"
    :parantId="parantId"
    :commentId="commentId"
    :blogId="blogId"
    :type="type"
  ></reply>
  <el-dialog
    v-model="deleteCommentFlag"
    width="10%"
    top="40vh"
    center
    :show-close="false"
  >
    <span class="text">确定删除这个评论嘛?</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="deleteCommentFlag = false">取消</el-button>
        <el-button type="warning" @click="deleteComment(props.commentData?.id)"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import {
  computed,
  getCurrentInstance,
  inject,
  PropType,
  ref,
  watch,
} from "vue";
import { repliesItem, topicItem, UserData } from "./Topic/types";
import usePrevenDefault from "../hooks/usePrevenDefault";
import { createTime } from "../utils/tools";
import MarkdownIt from "markdown-it";
import { useStore } from "vuex";
import Reply from "../components/Reply.vue";
import "github-markdown-css";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
usePrevenDefault("replyAitem");
let deleteCommentFlag = ref(false);
const md = new MarkdownIt();
const userInfo = computed(() => store.state.userInfos);
const store = useStore();
const dialogTableVisible = ref<boolean>(false);
const ReplyUserInfo = ref<UserData>();
const commentId = ref<number>();
const parantId = ref<number>();
const blogId = ref<number>();
const router = useRouter();
const showReply = ref<boolean>(false);
//回复评论还是回复回复
const type = ref<string>();
const { $api } = getCurrentInstance()!.appContext.config.globalProperties!;
const showReplyDialog = (
  commentid: number,
  replyid: number,
  typeHan: string,
  blogid: number,
  userInfo?: UserData,
) => {
  // console.log(commentid, replyid, typeHan, userInfo, blogid);
  dialogTableVisible.value = !dialogTableVisible.value;
  parantId.value = replyid;
  commentId.value = commentid;
  blogId.value = blogid;
  ReplyUserInfo.value = userInfo;
  type.value = typeHan;
};
const close = (flag: boolean) => {
  dialogTableVisible.value = flag;
};

const props = defineProps({
  commentData: {
    type: Object as PropType<topicItem>,
  },
  authorId: {
    type: Number,
  },
  getComment: {
    type: Function as PropType<() => void>,
  },
});
let commentReply = ref(props.commentData);
const authorId = inject("authorId", -1);
const contentHTML = computed(() => {
  const { content } = props.commentData!;
  if (content) {
    return md.render(content);
  }
});
//删除评论
const deleteComment = async (commentId: number) => {
  let res = await $api.topic.deleteComment(commentId);
  if (res.code == 200) {
    ElMessage.success("删除成功");
    deleteCommentFlag.value = false;
    props.getComment!();
  }
};

watch(
  () => props.commentData,
  (val) => {
    commentReply.value = val;
  },
);
</script>
<style lang="less" scoped>
.showCommentArea,
.showReplyArea {
  // margin-top: 10px;
  padding: 10px 20px 10px 20px;
  border-top: 1px solid #f2f2f2;
  background-color: #fff;
  display: flex;
  align-items: center;
  .left {
    width: 45px;
    height: 45px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      border-radius: 100%;
      object-fit: cover;
    }
  }
  .center {
    flex: 1;
    width: 100%;
    padding: 10px 10px 0 10px;
    display: flex;
    flex-direction: column;

    .nickName {
      font-weight: 700;
      .tag {
        font-size: 12px;
        font-weight: 400;
        color: #ff870b;
        padding: 1px;
        border: 1px solid red;
      }
    }
    .createTime {
      font-size: 12px;
      color: #939393;
      margin: 5px 0;
    }
  }
  .right {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .reply {
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      i {
        &:hover {
          cursor: pointer;
          color: #ff870b;
        }
      }
    }
  }
}
.showReplyArea {
  border: none;
  padding-left: 50px;
  .left {
    width: 35px;
    height: 35px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 100%;
      object-fit: cover;
    }
  }
  .center {
    flex: 1;
    width: 100%;
    padding: 10px 10px 0 10px;
    display: flex;
    flex-direction: column;

    .nickName {
      font-weight: 700;
      font-size: 14px;
    }
    .createTime {
      font-size: 12px;
      color: #939393;
      margin: 5px 0;
    }
  }
}
.ReplyContent {
  flex: 1;
  padding: 0 20px 10px 20px;
  margin: 0 20px 0 60px;
  :deep(p) {
    font-size: 14px;
  }
}
.replyContent {
  padding: 0 20px 10px 10px;
  margin: 0 20px 0 80px;
  font-size: 14px;

  :deep(.replyAitem) {
    color: #ff8200;
  }
}
.showMoreReply,
.putAway {
  color: #ff8200;
  margin: 0 20px 10px 80px;
  padding: 10px 5px;
  font-size: 12px;
  cursor: pointer;
}
</style>
